<template>
  <div class="logistics-map-container">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="logo">物流追踪系统</div>
      <el-menu
          :default-active="activeMenu"
          mode="horizontal"
          background-color="#165DFF"
          text-color="#fff"
          active-text-color="#fff"
          class="nav-menu"
      >
        <el-menu-item index="map">地图视图</el-menu-item>
        <el-menu-item index="list">运单列表</el-menu-item>
        <el-menu-item index="statistics">统计分析</el-menu-item>
        <el-menu-item index="settings">系统设置</el-menu-item>
      </el-menu>
      <div class="user-info">
        <el-avatar icon="User" class="user-avatar" />
        <span class="user-name">管理员</span>
      </div>
    </el-header>

    <!-- 主要内容区域 -->
    <el-container class="main-container">
      <!-- 左侧筛选面板 -->
      <el-aside width="300px" class="filter-panel">
        <div class="panel-title">物流筛选</div>

        <el-form :inline="true" class="filter-form">
          <el-form-item label="运单号">
            <el-input v-model="waybillNo" placeholder="请输入运单号" clearable />
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="status" placeholder="全部状态" clearable>
              <el-option label="全部状态" value="" />
              <el-option label="运输中" value="transporting" />
              <el-option label="已签收" value="signed" />
              <el-option label="待取件" value="waiting" />
              <el-option label="已延误" value="delayed" />
            </el-select>
          </el-form-item>

          <el-form-item label="出发地">
            <el-input v-model="fromLocation" placeholder="请输入出发地" clearable />
          </el-form-item>

          <el-form-item label="目的地">
            <el-input v-model="toLocation" placeholder="请输入目的地" clearable />
          </el-form-item>

          <el-form-item label="时间范围">
            <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                clearable
            />
          </el-form-item>

          <el-form-item class="filter-actions">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetFilters">重置</el-button>
          </el-form-item>
        </el-form>

        <div class="panel-title mt-4">物流信息列表</div>
        <el-scrollbar height="calc(100vh - 420px)">
          <div
              v-for="item in filteredLogistics"
              :key="item.id"
              class="logistics-item"
              :class="{ 'active': selectedLogisticsId === item.id }"
              @click="selectLogistics(item)"
          >
            <div class="logistics-header">
              <span class="waybill-number">{{ item.waybillNo }}</span>
              <el-tag
                  :type="getStatusTagType(item.status)"
                  class="status-tag"
              >
                {{ getStatusText(item.status) }}
              </el-tag>
            </div>
            <div class="logistics-details">
              <div class="location-info">
                <i class="el-icon-location-outline from-icon" />
                <span class="location-text">{{ item.from }}</span>
              </div>
              <div class="location-info">
                <i class="el-icon-location to-icon" />
                <span class="location-text">{{ item.to }}</span>
              </div>
              <div class="time-info">
                <i class="el-icon-clock" />
                <span class="time-text">
                  发货: {{ formatDate(item.shippingTime) }}
                </span>
              </div>
              <div class="courier-info" v-if="item.courier">
                <i class="el-icon-user" />
                <span class="courier-text">
                  快递员: {{ item.courier.name }} ({{ item.courier.phone }})
                </span>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </el-aside>

      <!-- 右侧地图区域 -->
      <el-main class="map-container">
        <!-- 地图容器 -->
        <div id="map" class="map-content"></div>

        <!-- 选中物流信息面板 -->
        <div
            class="selected-info-panel"
            v-if="selectedLogistics"
        >
          <div class="panel-header">
            <h3>运单 {{ selectedLogistics.waybillNo }} 详情</h3>
            <el-button
                icon="Close"
                circle
                size="mini"
                class="close-btn"
                @click="clearSelection"
            />
          </div>

          <div class="progress-container">
            <el-timeline>
              <el-timeline-item
                  v-for="(event, index) in selectedLogistics.timeline"
                  :key="index"
                  :timestamp="formatDate(event.time)"
                  :placement="index % 2 === 0 ? 'top' : 'bottom'"
                  :type="index === 0 ? 'success' : 'primary'"
                  :color="index === 0 ? '#52C41A' : undefined"
              >
                <el-card>
                  <h4>{{ event.title }}</h4>
                  <p>{{ event.description }}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>

          <div class="location-details">
            <div class="detail-item">
              <span class="detail-label">当前位置:</span>
              <span class="detail-value">{{ selectedLogistics.currentLocation }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">预计到达:</span>
              <span class="detail-value">{{ formatDate(selectedLogistics.estimatedArrival) }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">物品类型:</span>
              <span class="detail-value">{{ selectedLogistics.goodsType }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">重量:</span>
              <span class="detail-value">{{ selectedLogistics.weight }} kg</span>
            </div>
          </div>

          <div class="panel-actions">
            <el-button type="primary" icon="Printer">打印运单</el-button>
            <el-button type="success" icon="Message">联系快递员</el-button>
            <el-button icon="Download">导出详情</el-button>
          </div>
        </div>
      </el-main>
    </el-container>

    <!-- 页脚 -->
    <el-footer class="footer">
      <p>© 2023 物流追踪系统 版权所有</p>
    </el-footer>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { ElMessage } from 'element-plus';

// 状态数据
const waybillNo = ref('');
const status = ref('');
const fromLocation = ref('');
const toLocation = ref('');
const dateRange = ref([]);
const activeMenu = ref('map');
const selectedLogisticsId = ref(null);
const selectedLogistics = ref(null);

// 模拟物流数据
const logisticsData = ref([
  {
    id: 1,
    waybillNo: 'SF1234567890123',
    status: 'transporting',
    from: '北京市朝阳区',
    to: '上海市浦东新区',
    currentLocation: '江苏省苏州市',
    shippingTime: '2023-05-10T08:30:00',
    estimatedArrival: '2023-05-12T18:00:00',
    goodsType: '电子产品',
    weight: 2.5,
    courier: {
      name: '张三',
      phone: '13800138000'
    },
    coordinates: {
      from: { lat: 39.9042, lng: 116.4074 },
      to: { lat: 31.2304, lng: 121.4737 },
      current: { lat: 31.2993, lng: 120.6195 }
    },
    timeline: [
      {
        time: '2023-05-11T10:15:00',
        title: '运输中',
        description: '包裹正在从苏州转运中心发往上海浦东集散中心'
      },
      {
        time: '2023-05-10T20:30:00',
        title: '已到达转运中心',
        description: '包裹已到达苏州转运中心'
      },
      {
        time: '2023-05-10T14:00:00',
        title: '已发出',
        description: '包裹已从北京朝阳集散中心发出'
      },
      {
        time: '2023-05-10T09:15:00',
        title: '已揽收',
        description: '快递员张三已揽收包裹'
      }
    ]
  },
  {
    id: 2,
    waybillNo: 'YD9876543210987',
    status: 'signed',
    from: '广州市天河区',
    to: '深圳市南山区',
    currentLocation: '深圳市南山区',
    shippingTime: '2023-05-08T10:00:00',
    estimatedArrival: '2023-05-09T12:00:00',
    goodsType: '服装鞋帽',
    weight: 1.2,
    courier: {
      name: '李四',
      phone: '13900139000'
    },
    coordinates: {
      from: { lat: 23.1291, lng: 113.2644 },
      to: { lat: 22.5431, lng: 114.0579 },
      current: { lat: 22.5431, lng: 114.0579 }
    },
    timeline: [
      {
        time: '2023-05-09T15:30:00',
        title: '已签收',
        description: '客户已签收，签收人：王女士'
      },
      {
        time: '2023-05-09T10:15:00',
        title: '派送中',
        description: '快递员李四正在派送中，请保持电话畅通'
      },
      {
        time: '2023-05-09T08:00:00',
        title: '已到达派送点',
        description: '包裹已到达深圳南山派送点'
      },
      {
        time: '2023-05-08T14:30:00',
        title: '已发出',
        description: '包裹已从广州天河集散中心发出'
      }
    ]
  },
  {
    id: 3,
    waybillNo: 'ZT5678901234567',
    status: 'waiting',
    from: '成都市锦江区',
    to: '重庆市渝中区',
    currentLocation: '重庆市渝中区解放碑派送点',
    shippingTime: '2023-05-10T15:00:00',
    estimatedArrival: '2023-05-11T10:00:00',
    goodsType: '生活用品',
    weight: 3.8,
    courier: {
      name: '王五',
      phone: '13700137000'
    },
    coordinates: {
      from: { lat: 30.6570, lng: 104.0650 },
      to: { lat: 29.5630, lng: 106.5510 },
      current: { lat: 29.5618, lng: 106.5531 }
    },
    timeline: [
      {
        time: '2023-05-11T09:00:00',
        title: '待取件',
        description: '包裹已到达派送点，请尽快取件或联系快递员安排派送'
      },
      {
        time: '2023-05-11T06:30:00',
        title: '已到达派送点',
        description: '包裹已到达重庆渝中解放碑派送点'
      },
      {
        time: '2023-05-10T22:00:00',
        title: '已到达转运中心',
        description: '包裹已到达重庆转运中心'
      },
      {
        time: '2023-05-10T16:30:00',
        title: '已发出',
        description: '包裹已从成都锦江集散中心发出'
      }
    ]
  },
  {
    id: 4,
    waybillNo: 'JD1122334455667',
    status: 'delayed',
    from: '杭州市西湖区',
    to: '南京市玄武区',
    currentLocation: '浙江省湖州市',
    shippingTime: '2023-05-09T09:00:00',
    estimatedArrival: '2023-05-10T18:00:00',
    goodsType: '食品饮料',
    weight: 5.2,
    courier: {
      name: '赵六',
      phone: '13600136000'
    },
    coordinates: {
      from: { lat: 30.2741, lng: 120.1551 },
      to: { lat: 32.0603, lng: 118.7969 },
      current: { lat: 30.8682, lng: 120.0037 }
    },
    timeline: [
      {
        time: '2023-05-11T08:00:00',
        title: '已延误',
        description: '因天气原因，包裹派送将延误1-2天，敬请谅解'
      },
      {
        time: '2023-05-10T15:00:00',
        title: '运输中',
        description: '包裹正在从杭州转运中心发往南京集散中心'
      },
      {
        time: '2023-05-09T16:30:00',
        title: '已到达转运中心',
        description: '包裹已到达杭州转运中心'
      },
      {
        time: '2023-05-09T10:30:00',
        title: '已揽收',
        description: '快递员赵六已揽收包裹'
      }
    ]
  }
]);

// 计算属性 - 筛选后的物流数据
const filteredLogistics = computed(() => {
  return logisticsData.value.filter(item => {
    // 运单号筛选
    if (waybillNo.value && !item.waybillNo.includes(waybillNo.value)) {
      return false;
    }

    // 状态筛选
    if (status.value && item.status !== status.value) {
      return false;
    }

    // 出发地筛选
    if (fromLocation.value && !item.from.includes(fromLocation.value)) {
      return false;
    }

    // 目的地筛选
    if (toLocation.value && !item.to.includes(toLocation.value)) {
      return false;
    }

    // 日期范围筛选
    if (dateRange.value && dateRange.value.length === 2) {
      const shippingDate = new Date(item.shippingTime);
      if (shippingDate < dateRange.value[0] || shippingDate > dateRange.value[1]) {
        return false;
      }
    }

    return true;
  });
});

// 方法 - 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'transporting': '运输中',
    'signed': '已签收',
    'waiting': '待取件',
    'delayed': '已延误'
  };
  return statusMap[status] || status;
};

// 方法 - 获取状态标签类型
const getStatusTagType = (status) => {
  const typeMap = {
    'transporting': 'primary',
    'signed': 'success',
    'waiting': 'warning',
    'delayed': 'danger'
  };
  return typeMap[status] || 'info';
};

// 方法 - 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 方法 - 选择物流信息
const selectLogistics = (item) => {
  selectedLogisticsId.value = item.id;
  selectedLogistics.value = item;
  // 在地图上显示选中的物流路线和当前位置
  showLogisticsOnMap(item);
};

// 方法 - 清除选择
const clearSelection = () => {
  selectedLogisticsId.value = null;
  selectedLogistics.value = null;
  // 重置地图显示
  resetMap();
};

// 方法 - 搜索
const handleSearch = () => {
  // 这里可以添加搜索逻辑
  ElMessage.success('搜索成功');
  // 如果有筛选结果，默认选中第一个
  if (filteredLogistics.value.length > 0) {
    selectLogistics(filteredLogistics.value[0]);
  } else {
    clearSelection();
  }
};

// 方法 - 重置筛选条件
const resetFilters = () => {
  waybillNo.value = '';
  status.value = '';
  fromLocation.value = '';
  toLocation.value = '';
  dateRange.value = [];
  clearSelection();
};

// 地图相关方法
const showLogisticsOnMap = (logistics) => {
  // 这里是模拟地图操作
  console.log('在地图上显示物流信息:', logistics);
  // 实际项目中，这里应该调用地图API绘制路线和标记点
};

const resetMap = () => {
  // 这里是模拟重置地图
  console.log('重置地图显示');
  // 实际项目中，这里应该调用地图API清除绘制的内容
};

// 初始化地图
const initMap = () => {
  // 这里是模拟地图初始化
  console.log('地图初始化完成');
  // 实际项目中，这里应该初始化地图实例
  // 例如使用高德地图、百度地图或其他地图服务

  // 默认显示第一个物流信息
  if (logisticsData.value.length > 0) {
    selectLogistics(logisticsData.value[0]);
  }
};

// 生命周期 - 挂载完成
onMounted(() => {
  initMap();
});
</script>

<style scoped>
.logistics-map-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
  background-color: #165DFF;
  color: white;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-menu {
  flex: 1;
  margin: 0 20px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  background-color: rgba(255, 255, 255, 0.2);
}

.main-container {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.filter-panel {
  background-color: #f5f7fa;
  border-right: 1px solid #e4e7ed;
  padding: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.panel-title {
  font-size: 16px;
  font-weight: bold;
  color: #1f2329;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e4e7ed;
}

.filter-form {
  margin-bottom: 10px;
}

.el-form-item {
  margin-bottom: 12px;
}

.filter-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.logistics-item {
  background-color: white;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #e4e7ed;
}

.logistics-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.logistics-item.active {
  border-color: #165DFF;
  background-color: rgba(22, 93, 255, 0.05);
}

.logistics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.waybill-number {
  font-weight: bold;
  color: #1f2329;
}

.status-tag {
  font-size: 12px;
}

.logistics-details {
  font-size: 13px;
}

.location-info, .time-info, .courier-info {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  color: #4e5969;
}

.from-icon {
  color: #165DFF;
  margin-right: 6px;
}

.to-icon {
  color: #f53f3f;
  margin-right: 6px;
}

.el-icon-clock, .el-icon-user {
  margin-right: 6px;
  color: #86909c;
}

.map-container {
  flex: 1;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.map-content {
  width: 100%;
  height: 100%;
  background-color: #eaf4ff;
}

.selected-info-panel {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 380px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  max-height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
}

.panel-header {
  background-color: #165DFF;
  color: white;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-header h3 {
  margin: 0;
  font-size: 16px;
}

.close-btn {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}

.progress-container {
  padding: 10px 16px;
  overflow-y: auto;
  flex: 1;
}

.el-timeline {
  padding-left: 10px;
}

.el-timeline-item {
  margin-bottom: 15px;
}

.el-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.location-details {
  padding: 12px 16px;
  border-top: 1px solid #e4e7ed;
  background-color: #fafafa;
}

.detail-item {
  display: flex;
  margin-bottom: 8px;
  font-size: 13px;
}

.detail-label {
  color: #86909c;
  width: 80px;
}

.detail-value {
  color: #1f2329;
  flex: 1;
}

.panel-actions {
  padding: 12px 16px;
  border-top: 1px solid #e4e7ed;
  display: flex;
  gap: 8px;
}

.footer {
  text-align: center;
  padding: 10px 0;
  font-size: 12px;
  color: #86909c;
  background-color: #f5f7fa;
  border-top: 1px solid #e4e7ed;
}
</style>
